<template>
  <div>
    <p-input
    :value="currentNames"
    :disabled="disabled"
    allow-clear
    @change="onInputChange"
    @click="showModal"
  />

    <p-modal
      v-model="visible"
      :mask-closable="false"
      :width="600"
      title="选择用户"
      @cancel="onCancel"
      @ok="onOk"
    >
      <div>
        <p-input-search style="width:150px;" placeholder="请输入关键字" v-model.trim="keyword" @search="search()" />
        <p-button icon="redo">重置</p-button>
      </div>
      <p-table
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        :row-selection="{selectedRowKeys, onChange, type: multiple ? 'checkbox' : 'radio'}"
        class="mt20"
        size="middle"
        row-key="uid"
      />
    </p-modal>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  props: {
    value: Array,
    disabled: Boolean,
    multiple: Boolean,
    departId: String,
  },
  data() {
    return {
      visible: false,
      dataSource: [],
      loading: false,
      keyword: '',
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        onChange: current => this.search,
        onShowSizeChange: (current, pageSize) => {
          this.pagination.pageSize = pageSize
          this.search()
        }
      },
      columns: [
        {
          title: '用户账号',
          align: 'center',
          dataIndex: 'uid'
        },
        {
          title: '用户姓名',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '性别',
          align: 'center',
          dataIndex: 'sex',
          customRender: function (text) {
              if (text === '1') {
              return '男'
            } else if (text === '2') {
              return '女'
            } else {
              return text
            }
          }
        },
        {
          title: '手机',
          align: 'center',
          dataIndex: 'mobile'
        },
        {
          title: '部门',
          align: 'center',
          dataIndex: 'orgName'// orgPosDtos.orgName
        }
      ],
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  computed: {
    currentNames() {
      const names = []
      if (this.value && this.value.length) {
        this.value.forEach(item => {
          names.push(item.userName)
        })
      }

      return names.join(',')
    }
  },
  methods: {
    showModal() {
      this.visible = true
      this.setCurrentKeys()
      this.search()
    },
    setCurrentKeys() {
      const keys = []
      let selectedRows = []
      if (this.value && this.value.length) {
        if (this.multiple) {
          this.value.forEach(item => {
            keys.push(item.userCode)
          })
          selectedRows = [...this.value]
        } else {
          keys.push(this.value[0].userCode)
          selectedRows = [this.value[0]]
        }
      }
      this.selectedRowKeys = keys
      this.selectedRows = selectedRows
    },
    search(current = 1) {
      this.pagination.current = current
      this.getData()
    },
    getData() {
      this.loading = true
      const params = {
        pageNo: this.pagination.current,
        limit: this.pagination.pageSize,
        keyword: this.keyword,
        orgCode: this.departId,
      }
      getAction('/poros-permission/secStaff/list', params).then(res => {
        this.loading = false
        this.dataSource = res.data.records || []
        this.pagination.total = res.data.total || 0
      })
    },
    onChange(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows)
      if (this.multiple) {
        this.selectedRowKeys = [...new Set([...this.selectedRowKeys, ...selectedRowKeys])]
        const rows = selectedRows.filter(item => {
          return !this.selectedRows.find(one => item.uid === one.uid || item.uid === one.userCode)
        })
        this.selectedRows = [...this.selectedRows, ...rows]
      } else {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      }
    },
    onInputChange(event) {
      if (event.type === 'click' && event.target && !event.target.value) {
        this.$emit('input', [])
      }
    },
    onOk() {
      const selectedRows = []
      this.selectedRowKeys.forEach(uid => {
        const item = this.selectedRows.find(item => item.uid === uid || item.userCode === uid)
        if (item) {
          selectedRows.push({
            userCode: item.uid || item.userCode,
            userName: item.name || item.userName,
          })
        }
      })
      this.$emit('input', selectedRows)
      this.onCancel()
    },
    onCancel() {
      this.visible = false
    }
  }
}
</script>
